<template>
  <div class="tl-phone">
    <div class="tl-phone-item">
      <label>手机号</label>
      <div class="tl-item-input">
        <input placeholder="请填写" v-model="formData.phone">
      </div>
    </div>
    <div class="tl-phone-item">
      <label>验证码</label>
      <div class="tl-item-input">
        <input placeholder="请填写" v-model="formData.verification_code" style="width: 70%">
        <a class="msg-verify-btn red-gra-btn"
           href="javascript:;"
           @click="refreshmsgVerify">{{msgVerifyTxt}}</a>
      </div>
    </div>

    <!--  提交按钮  -->
    <div class="tl-company-btn">
      <div class="btn-push red-gra-btn" @click="handleSubmitData">立即绑定</div>
    </div>
  </div>
</template>

<script>
import { tongLianBindPhone, sendVerificationCode } from '@/api/user/member/memberApi'
export default {
  name: 'index',
  data() {
    return {
      formData: {
        phone: '',
        verification_code: ''
      },
      msgVerifyTxt: '获取验证码'
    }
  },
  methods: {
    jumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    refreshmsgVerify() {
      if (this.formData.phone == '') {
        this.$Error('请输入手机号')
        return false
      }
      const sendData = {
        veri_code_type: '9',
        member_type: '2',
        phone: this.formData.phone
      }
      sendVerificationCode(sendData).then(res => {
        if (res.status == 1) {
          this.setTimeoutVerify()
          this.$Error('发送成功')
        } else {
          this.$Error(res.msg)
        }
      })
    },
    handleSubmitData() {
      if (this.formData.phone == '') {
        this.$Error('请输入手机号')
        return false
      }
      if (this.formData.verification_code == '') {
        this.$Error('请输入验证码')
        return false
      }
      const sendData = {
        member_type: '2',
        phone: this.formData.phone,
        verification_code: this.formData.verification_code
      }
      tongLianBindPhone(sendData).then(res => {
        if (res.status == 1) {
          this.$Error(res.msg)
          setTimeout(() => {
            this.jumpName('tlQualiUpload', { idCard: 0, comUp: 0 })
          }, 1500)
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 获取验证码倒计时
    setTimeoutVerify() {
      let count = 60
      this.msgVerifyTxt = count + '秒后重新获取'
      const timer = setInterval(() => {
        this.msgVerifyTxt = count + '秒后重新获取'
        if (count <= 0) {
          this.msgVerifyTxt = '获取验证码'
          clearInterval(timer)
        }
        count--
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
  .tl-phone {
    margin-top: 20px;
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
    background: #fff;

    .tl-phone-item {
      height: 88px;
      line-height: 88px;
      font-size: 28px;
      color: #454545;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      border-bottom: 1px solid #F4F4F6;
      label {
        width: 100px;
      }
      .tl-item-input {
        width: calc(100% - 70px);
        position: relative;
        input {
          width: 100%;
          height: 90%
        }
      }
    }

    .msg-verify-btn {
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      width: 150px;
      height: 54px;
      line-height: 54px;
      border-radius: 46px;
      text-align: center;
      font-size: 24px;
      color: #fff;
    }

    .tl-company-btn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      padding: 12px 26px;
      .btn-push {
        height: 92px;
        line-height: 92px;
        text-align: center;
        font-size: 32px;
        border-radius: 46px;
      }
    }
  }
</style>
